<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片管理</title>
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
    #test1{
    	width:220px!important;
    }
    #test2{
    	width:220px!important;
    }
    #test3{
    	width:220px!important;
    }
    #test4{
    	width:220px!important;
    }
    </style>
</head>
<body>

	<div class="layui-container" style="border: 0px solid red;top:200px;"> 
		<div class="layui-row layui-col-space7">
		    <div class="layui-col-md3">
		    	<img id="img1" style="width: 220px;height: 220px;" alt="" src="">
		    	<div class="layui-upload">
					<button type="button" class="layui-btn" id="test1" style="margin-top:30px;">更改第一张图片</button>
					<div class="layui-upload-list">
						<img class="layui-upload-img" style="max-width: 220px;max-height: 220px;" id="demo1">
						<p id="demoText1"></p>
					</div>
				</div> 
		    </div>
		    <div class="layui-col-md3">
		    	<img id="img2" style="width: 220px;height: 220px;" alt="" src="">
		    	<div class="layui-upload">
					<button type="button" class="layui-btn" id="test2" style="margin-top:30px;">更改第二张图片</button>
					<div class="layui-upload-list">
						<img class="layui-upload-img" style="max-width: 220px;max-height: 220px;" id="demo2">
						<p id="demoText2"></p>
					</div>
				</div>
		    </div>
		    <div class="layui-col-md3">
		      <img id="img3" style="width: 220px;height: 220px;" alt="" src="">
		      <div class="layui-upload">
					<button type="button" class="layui-btn" id="test3" style="margin-top:30px;">更改第三张图片</button>
					<div class="layui-upload-list">
						<img class="layui-upload-img" style="max-width: 220px;max-height: 220px;" id="demo3">
						<p id="demoText3"></p>
					</div>
				</div>
		    </div>
		    <div class="layui-col-md3">
		      <img id="img4" style="width: 220px;height: 220px;" alt="" src="/file/sxapp1.jpg">
		      <div class="layui-upload">
					<button type="button" class="layui-btn" id="test4" style="margin-top:30px;">更改第四张图片</button>
					<div class="layui-upload-list">
						<img class="layui-upload-img" style="max-width: 220px;max-height: 220px;" id="demo4">
						<p id="demoText4"></p>
					</div>
				</div>
		    </div>
  		</div>
	</div>

</body>
<script src="../layuiadmin/layui/layui.js"></script>  
<script>
  
  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','table', 'laydate'], function(){
    var table = layui.table
    ,form = layui.form
    ,$ = layui.$
    ,admin = layui.admin;
    
  });
  layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
	  $("#img1").attr('src',"/file/imgs/${img1}"+"?"+Date.now());
	  $("#img2").attr('src',"/file/imgs/${img2}"+"?"+Date.now());
	  $("#img3").attr('src',"/file/imgs/${img3}"+"?"+Date.now());
	  $("#img4").attr('src',"/file/imgs/${img4}"+"?"+Date.now());
	  
	  var uploadInst1 = upload.render({
		    elem: '#test1'
		    ,url: '/image/updateIndexImages?imgname='+'${img1}'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      /* obj.preview(function(index, file, result){
		        $('#demo1').attr('src', result); //图片链接（base64）
		      }); */
		      
		    }
		    ,done: function(res){
		      //如果上传失败
		      
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }else{
		    	  layer.msg('上传成功');
		    	  
		    	  window.location.reload(); 
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText1');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst1.upload();
		      });
		    }
		  });
	  var uploadInst2 = upload.render({
		    elem: '#test2'
		    ,url: '/image/updateIndexImages?imgname='+'${img2}'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      /* obj.preview(function(index, file, result){
		        $('#demo2').attr('src', result); //图片链接（base64）
		      }); */
		      
		    }
		    ,done: function(res){
		      //如果上传失败
		      
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }else{
		    	  layer.msg('上传成功');
		    	  window.location.reload(); 
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText2');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst2.upload();
		      });
		    }
		  });
	  var uploadInst3 = upload.render({
		    elem: '#test3'
		    ,url: '/image/updateIndexImages?imgname='+'${img3}'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      /* obj.preview(function(index, file, result){
		        $('#demo3').attr('src', result); //图片链接（base64）
		      }); */
		      
		    }
		    ,done: function(res){
		      //如果上传失败
		      
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }else{
		    	  layer.msg('上传成功');
		    	  window.location.reload(); 
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText3');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst3.upload();
		      });
		    }
		  });
	  var uploadInst4 = upload.render({
		    elem: '#test4'
		    ,url: '/image/updateIndexImages?imgname='+'${img4}'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      /* obj.preview(function(index, file, result){
		        $('#demo4').attr('src', result); //图片链接（base64）
		      }); */
		      
		    }
		    ,done: function(res){
		      //如果上传失败
		      
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }else{
		    	  layer.msg('上传成功');
		    	  window.location.reload(); 
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText4');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst4.upload();
		      });
		    }
		  });
	  });
  </script>
</html>